<template>
  <div>
    <overView title="樱·绘画" :workList1="workList1" :workList2="workList2">
    </overView>
    <!-- 分页组件 -->
    <div class="pagination">
      <span>每页16条记录</span>
      <span>总共{{ this.totalItem }}条</span>
      <span class="funcs" @click="changeCurrentPage(1)">首页</span>
      <span class="funcs" @click="changeCurrentPage(--currPageNum)"
        >&lt;&lt;上一页</span
      >
      <input
        id="newPageNum"
        type="text"
        style="width: 20px"
        disabled
        value="1"
      />
      <span class="funcs" @click="changeCurrentPage(++currPageNum)"
        >下一页&gt;&gt;</span
      >
      <span class="funcs" @click="changeCurrentPage(totalPage)">尾页</span>
      <span>{{ this.currPageNum }}/{{ this.totalPage }}</span>
    </div>
  </div>
</template>

<script>
import overView from "../components/overView.vue";
import { getWorksByModuleId } from "../api/api.js";
export default {
  components: {
    overView,
  },
  data() {
    return {
      queryInfo: {
        moduleId: 3,
        pageNum: 1,
      },
      totalItem: "",
      currPageNum: 1,
      totalPage: 0,
      workList: [],
      workList1: [],
      workList2: [],
    };
  },
  mounted() {
    this.getWorksByModuleId();
  },
  methods: {
    //拆分数组
    sliceWorkList() {
      this.workList1 = this.workList.slice(0, 8);
      this.workList2 = this.workList.slice(8, 16);
    },
    //根据id获取作品数组
    async getWorksByModuleId() {
      let res = await getWorksByModuleId(this.queryInfo);
      this.workList = res.data.moduleList;
      this.totalItem = res.data.total;
      this.totalPage = res.data.totalPage;
      console.log(this.workList);
      this.sliceWorkList();
    },
    //翻页
    changeCurrentPage(page) {
      if (page > 0 && page <= this.totalPage) this.queryInfo.pageNum = page;
      this.currPageNum = this.queryInfo.pageNum;
      document.getElementById("newPageNum").value = this.currPageNum;
      this.getWorksByModuleId();
    },
  },
};
</script>

<style lang="less" scoped>
.pagination {
  margin-bottom: 15px;
  span {
    margin: 5px;
  }
  .funcs {
    cursor: pointer;
  }
  input {
    text-indent: 6px;
  }
}
</style>
